<template>
  <el-dialog
    title="移动素材"
    :visible="visible"
    width="500px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-select v-model="value" placeholder="请选择" size="mini" @change="change">
      <el-option
        v-for="item in categoryList"
        :key="item.id"
        :label="`${item.title}（${item.material_count}）`"
        :value="item.id"
      ></el-option>
    </el-select>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="onSubmit">保存</el-button>
      <el-button size="mini" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    type: [String, Number],
    checkList: Array,
    category: Array
  },
  data() {
    return {
      value: -1
    }
  },
  computed: {
    categoryList() {
      let list = this.category.filter(item => {
        if (item.id !== 0) {
          return item
        }
      })
      return list
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    onSubmit() {
      let _this = this
      _this.$api.putUserTeacherMaterialMove(
        {
          ids: this.checkList.toString(),
          cate_id: this.value
        },
        res => {
          _this.$message.success(res.msg)
          _this.handleClose()
          _this.$emit('reload')
        },
        error => {
          _this.$message.error(error.msg)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e4e7ed;
}
</style>
